<template>
  <div class="m16">
    <a-row :gutter="1">
      <a-col :span="4">
        <BasicTree ref="treeRef" title="接口目录" toolbar search :treeData="treeData" :expandedKeys="expandedKeys"
          :showLine="true" :autoExpandParent="true" :fieldNames="{ key: 'docId', title: 'name' }" showIcon
          @select="handleSelect" />
      </a-col>
      <a-col :span="12">
        <Detail :docId="docId" />
      </a-col>
      <a-col :span="8">
        <Debug :docId="docId" />
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue';
import { BasicTree } from '/@/components/Tree';
import { getApiDocTree } from '/@/api/sys/api';
import Detail from './detail.vue';
import Debug from './debug.vue';

const docId = ref('');
const expandedKeys = ref([]);

const treeData = ref([]);
onBeforeMount(() => {
  getTreeData();
});

async function getTreeData() {
  let result = await getApiDocTree();
  treeData.value = result.data || [];
  expandedKeys.value = result.data.map(item => item.docId);  
}


// 选中事件
function handleSelect(selectedKeys) {
  if (selectedKeys.length > 0) {
    docId.value = selectedKeys[0];
  }
}


</script>

<style lang="less">
.m16 {
  margin: 16px;
}
</style>